@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "../styles/clear-fix";

.card {
	display: block;
	position: relative;
	margin: 0 auto 10px;
	padding: 16px;
	box-sizing: border-box;
	background: var(--color-surface);
	box-shadow: 0 0 0 1px var(--color-border-subtle);
	// Card class name is too generic. Which results and this component randomly getting borders.
	border: none;

	a:not(.components-external-link) {
		text-decoration: none;
	}
	p a:not(.components-external-link) {
		text-decoration: underline;
	}

	@include a8c-clear-fix;

	@include break-mobile {
		margin-bottom: 16px;
		padding: 24px;
	}

	// Compact Card
	&.is-compact {
		margin-bottom: 1px;

		@include break-mobile {
			margin-bottom: 1px;
			padding: 16px 24px;
		}
	}

	&.is-card-link {
		padding-right: 48px;
		text-decoration: none;
		&:not(a) {
			color: var(--color-primary);
			font-size: 100%;
			line-height: 1.5;
			text-align: left;
			width: 100%;

			&:active,
			&:focus,
			&:hover {
				color: var(--color-link-dark);
			}
		}
	}

	&.is-clickable {
		cursor: pointer;
	}

	&.is-highlight {
		padding-left: 21px;
	}

	&.is-error {
		border-left: 3px solid var(--color-error-20);
	}

	&.is-info {
		border-left: 3px solid var(--color-primary-20);
	}

	&.is-success {
		border-left: 3px solid var(--color-success-20);
	}

	&.is-warning {
		border-left: 3px solid var(--color-warning-20);
	}
}

// Clickable Card
.card__link-indicator {
	color: var(--color-text-subtle);
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	right: 16px;

	html[dir="rtl"] & {
		&.gridicons-chevron-right {
			transform: scaleX(-1);
		}
	}
}

a.card:hover,
.is-card-link.card:hover {
	.card__link-indicator {
		color: var(--color-text);
	}
}

a.card:focus,
.is-card-link.card:focus {
	.card__link-indicator {
		color: var(--color-link-dark);
	}
}
